import React, { useState } from 'react';

import {
  AppstoreOutlined,
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  SettingOutlined,
  QuestionCircleOutlined,
  ApiOutlined,
  ToolOutlined,
} from '@ant-design/icons';

import MinimizeIcon from '@/assets/codicon_minimize.svg';
import MaximizeIcon from '@/assets/codicon_maximize.svg';
import CloseIcon from '@/assets/codicon_close.svg';
import RestoreIcon from '@/assets/codicon_restore.svg';

import { appWindow, getCurrent } from '@tauri-apps/api/window';
import { Link, useNavigate } from 'react-router-dom';
import { open } from '@tauri-apps/api/shell';
import { invoke } from '@tauri-apps/api';
import { Layout, Menu } from 'antd';
import { useLocalStorageState } from 'ahooks';

const { Sider, Content } = Layout;

const TitleBar = ({
  collapsed,
  onCollapsed,
}: {
  collapsed: boolean;
  onCollapsed: (b: boolean) => void;
}) => {
  const [maximize, setMaximize] = useState(false);

  return (
    <div data-tauri-drag-region className="drag-region titlebar">
      <div className="left">
        <span
          onClick={() => {
            onCollapsed(!collapsed);
          }}
          style={{ width: 48, textAlign: 'center', display: 'inline-block' }}
        >
          {collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
        </span>
        <span>DevToys</span>
      </div>
      <div className="right">
        <div
          className="titlebar-button"
          onClick={async () => {
            await open(import.meta.env.VITE_REPO_URL);
          }}
          style={{ color: 'white' }}
        >
          <QuestionCircleOutlined />
        </div>
        <div
          className="titlebar-button"
          onClick={async () => {
            await invoke('open_devtools');
          }}
          style={{ color: 'white' }}
        >
          <ToolOutlined />
        </div>
        <Link className="titlebar-button" to="/pip" style={{ color: 'white' }}>
          <ApiOutlined />
        </Link>
        <Link
          className="titlebar-button"
          to="/setting"
          style={{ color: 'white' }}
        >
          <SettingOutlined />
        </Link>
        <div className="titlebar-button" onClick={() => appWindow.minimize()}>
          <img src={MinimizeIcon} />
        </div>
        <div
          className="titlebar-button"
          id="maximize"
          onClick={() => {
            if (maximize) {
              appWindow.unmaximize();
            } else {
              appWindow.maximize();
            }
            setMaximize(!maximize);
          }}
        >
          <img src={maximize ? RestoreIcon : MaximizeIcon} />
        </div>
        <div
          className="titlebar-button"
          onClick={() => {
            const app = getCurrent();
            app.close();
          }}
        >
          <img src={CloseIcon} />
        </div>
      </div>
    </div>
  );
};

export default (props: any) => {
  const navigate = useNavigate();
  const [pathname, setPathname] = useState('/home');
  const [collapsed, setCollapsed] = useLocalStorageState<boolean>('collapsed', {
    defaultValue: false,
  });

  return (
    <div className="App">
      <Layout>
        <TitleBar collapsed={collapsed} onCollapsed={setCollapsed} />
        <Layout>
          <Sider
            trigger={null}
            theme="dark"
            collapsible
            collapsed={collapsed}
            width={160}
            collapsedWidth={56}
          >
            <Menu
              className="main"
              mode="inline"
              theme="dark"
              defaultSelectedKeys={['/home']}
              items={[
                {
                  key: '/home',
                  label: '应用中心',
                  icon: <AppstoreOutlined />,
                },
              ]}
            />
          </Sider>
          <Content>{props.children}</Content>
        </Layout>
      </Layout>
    </div>
  );
};
